优级先级从左到右,从低到高
继承样式=>浏览器预设的样式=>通用选择器=>标签选择器=>id选择器=>后代+id选择器
=>行内样式
以 下是id选择器=>后代+id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css叠加性和层叠性</title>
<style>
div{color:green;}
1*{font-size:20px;}
#one{color:gray;}
div #one{color:red;}
</style>
</head>
<body>
<div>
<a href="" class="laoLiu" id="one">css叠加性和层叠性1</a>
<br>
<span class="laoLiu">css叠加性和层叠性2</span>
</div>
</body>
</html>
返回:
以下是后代+id选择器=>行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css叠加性和层叠性</title>
<style>
div{color:green;}
*{font-size:20px;}
#one{color:gray;}
div #one{color:red;}
</style>
</head>
<body>
<div>
<a href="" class="laoLiu" id="one" style="color:blue">css叠加性和层叠性1</a>
<br>
<span class="laoLiu">css叠加性和层叠性2</span>
</div>
</body>
</html>
返回值